<template>
    <el-dialog
        title="站内信类型"
        :visible.sync="dialogVisible"
        size="60%"
        custom-class="search-result-pop"
        :before-close="handleClose">
        <div style="margin-bottom: 30px">
            <FormGroup style="margin-top: 20px" :searchConfig="addColumnConfig" ref="formParams" labelWidth="120px" labelPosition="right" />
        </div>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import FormGroup from '@/views/components/FormGroup';
import { addColumnConfig } from '../initData';
import { createType, updateType } from '@/api/inner-msg/index.js';
import FileUpload from '@/components/FileUpload';
export default {
    name: 'AddPop',
    props: ['noDeleteTypes'],
    components: {
        FormGroup,
        FileUpload
    },
    data() {
        return {
            dialogVisible: false,
            addColumnConfig: JSON.parse(JSON.stringify(addColumnConfig)),
            row: {},
            popType: ''
        }
    },
    methods: {
        open({popType, row}) {
            this.dialogVisible = true;
            this.row = row ? JSON.parse(row) : {};
            this.popType = popType;
            if (popType === 'edit') {
                const newConfig = JSON.parse(JSON.stringify(addColumnConfig));
                const data = JSON.parse(row);
                const keys = Object.keys(data);
                keys.forEach((v) => {
                    newConfig.forEach(ele => {
                        if (ele.keyIndex === v) {
                            ele.value = data[v]
                        }
                    });
                });
                this.addColumnConfig = newConfig;
            } else {
                this.addColumnConfig = JSON.parse(JSON.stringify(addColumnConfig));
            }
            this.$refs.formParams && this.$refs.formParams.resetFields();
        },
        handleClose() {
            this.dialogVisible = false;
            this.addColumnConfig = JSON.parse(JSON.stringify(addColumnConfig));
        },
        async handleConfirm() {
            
            const fromParams = this.$refs.formParams && await this.$refs.formParams.getParams();
            if (this.noDeleteTypes.indexOf(fromParams.name) > -1) {
                this.$message.warning(`不允许手动添加 ${fromParams.name} 类型`);
                return;
            }
            
            this[this.popType](fromParams);
            
        },
        async add(fromParams) {
            const { code, msg } = await createType({
                name: fromParams.name,
                status: fromParams.status
            });
            if (code !== 0) {
                this.$message.error(msg);
                return;
            }
            this.$message.success('新增成功');
            this.$emit('success');
            this.handleClose();
        },
        async edit(fromParams) {
            const { code, msg } = await updateType({
                name: fromParams.name,
                status: fromParams.status,
                id: this.row.id
            });
            if (code !== 0) {
                this.$message.error(msg);
                return;
            }
            this.$message.success('编辑成功');
            this.$emit('success');
            this.handleClose();
        }
    }
}
</script>

<style lang='scss'>
    .search-result-pop {
        .el-drawer__body {
            padding: 15px 20px;
        }
        .basic-infos {

            .title {
                padding: 3px 10px;
                border-left: 2px solid rgb(20, 165, 232);
                margin-bottom: 20px;
            }
        }
    }
</style>